<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        [v-cloak]{
            display: none;
        }
        .menu{
            display: flex;
            padding:10px 0;
        }
        .menu li{
            padding:5px 20px;
            margin:0 10px;
            cursor: pointer;
            border-radius: 3px;
        }
        .menu li.active{
            background:orange;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <input type="text" v-model="lname">
        <input type="text" v-model="fname">
        <h1>{{nickname}}</h1>
        <div style="width: 1000px;border:1px solid red;margin:100px auto;">
            <div class="menu">
                <li>城市：</li>
                <li @click="activeIndex=i" :class="{active:i===activeIndex}" v-for="(item,i) in cityList">
                    {{item.name}}
                </li>
            </div>
            <div class="menu">
                <li>类型：</li>
                <li @click="activeTypeIndex=i" :class="{active:i===activeTypeIndex}" v-for="(item,i) in typeList">
                    {{item.name}}
                </li>
            </div>
            <h1>共{{showConut}}条演出信息</h1>
           <ul style="border:1px solid red;padding:20px;">
            <li style="display:flex;padding:20px 0px;border:1px solid green;" v-for="item in showlist">
                <a :href="'detail.html?id='+item.id" target="_blank">
                    <img :src="item.verticalPic" alt="" style="width:150px;height:200px;">
                </a>
                <div style="padding:20px;">
                    <div>【{{item.cityname}}】{{item.name}}</div>
                    <div>{{item.actors}}</div>
                    <div>{{item.categoryname}}</div>

                </div>

            </li>
        
        
           </ul>
        </div>

    </div>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    lname:"",
                    fname:"",
                    activeIndex:0,
                    showlist: [],
                    cityList:[
                        {
                        id:0,
                        name:"全部"
                        },
                        {
                        id:1,
                        name:"南京"
                        },
                        {
                        id:2,
                        name:"上海"
                        },
                        {
                        id:3,
                        name:"苏州"
                        },
                        {
                        id:4,
                        name:"北京"
                        }
                    ],
                    activeTypeIndex:0,
                    typeList:[      
                    {
                            id: 0,
                            name: "全部"
                        },
                        {
                            id: 1,
                            name: "演唱会"
                        },
                        {
                            id: 2,
                            name: "戏剧"
                        }, {
                            id: 3,
                            name: "体育比赛"
                        }
                    ]

                }
            },
            computed:{
                nickname(){
                    return this.fname +this.lname
                },
                showConut(){
                    return this.showlist.length
                }

            },
            watch:{
                activeIndex(){
                    this.getShowList()
                },
                activeTypeIndex(){
                    this.getShowList()
                }

            },
            methods:{
               async getShowList(){
                    console.log(this.cityList[this.activeIndex].id)
                    let cityid = this.cityList[this.activeIndex].id
                    let typeid = this.typeList[this.activeTypeIndex].id
                    let res =await fetch('show.json')
                    let arr = await res.json() //res.json() 返回个前端的数据就是json格式的
                    //不为0代表不是选全部
                    if(cityid){
                             arr= arr.filter((r)=>{
                                return  r.cityid===cityid
                            })
                    }
                    console.log(arr)
                    // if(cityid) arr = arr.filter(r=>r.cityid===cityid)
                    if(typeid) {
                        arr= arr.filter((r)=>{
                        return r.categoryid===typeid
                    })
                    }
                    this.showlist = arr 
                    
                    
                }
            },
           created(){
               this.getShowList()

           },
            mounted(){
             

            }
        })

    </script>
</body>
</html>